<template>
	<view class="wrap">
	   <!-- <view class="search-block" style="z-index: 1000;">
			<u-search  placeholder="线路编号|上下车点" @blur="seerchEmpty" @search="searchLine" :height="80" :clearabled="true" :show-action="false"  :animation="true" v-model="searchFrom.keyword"></u-search>
		</view> -->
		<view class='search acea-row row-between-wrapper'>
			<view class='input acea-row row-between-wrapper'>
				<text class='iconfont icon-sousuo2'></text>
				<input type='text' :value='keyword' 
				 placeholder='查找线路' 
				placeholder-class='placeholder' @input="searchLine"
				maxlength="20"></input>
			</view>
		</view>
		<view class="" style="height:90vh;">
			<scroll-view scroll-y="true" style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
				<view  v-if="searchLineList.length" style="margin-top: 20px;">
					<view class="list-title"><text>所有线路</text> </view>
						<view  v-for="(item,index) in searchLineList" :key="index">
						    <lineb  :lineInfo="item"></lineb>
						</view>
						<view class="loadingtext">
							{{loadStatus[0]}}
						</view>
				</view>
				<view  v-else >
					<emptyPage title="暂无线路～"></emptyPage>
				</view>
			</scroll-view>
		</view>
		
	</view>	
</template>

<script>
	import  lineb  from "@/components/line/index.vue"
	
     import Cache from '../../../utils/cache';
	 import { CITY_INFO} from '../../../config/cache.js'
	 var util = require('@/common/js/util.js');
	 var _getDiffDate = util.getDiffDate;
	 var _addDay = util.addDay;
	 var _dateDiff = util.dateDiff;
	 var _parseDate = util.parseDate;
	 var _formatDate = util.formatDate
	 import {Debounce} from '@/utils/validate.js'
	 import {searchLine} from '@/api/bus.js'
	export default {
		components:{ lineb },
		data() {
			return {
				background: {
					backgroundColor: '#ffffff',
					
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					
					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				resultList:[],
				type: 1,
				keyword: '',
				searchFrom:{
					keyword:'',
					page:1,
					limit:10,
				},
				searchLineList: [],
				trait_desc: '',
				loadStatus: ['上拉加载更多'],
				
			}
		},
		onLoad(option) {	
			var city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : ""
			this.searchFrom.city_id = city? city.id: "";
		},
		onReady() {
			this.initSearch(this.searchFrom,true)
			
		},
		methods:{
			
			initSearch(data, isloading){
				var that = this
				if(isloading){
					uni.showLoading({
						title: '正在加载'
					})
				}
				searchLine(data).then(res => {
				//	that.$refs.loading.close()		
					uni.hideLoading()
					if(res.data.list.length)
					 {
						 res.data.list.forEach(function(item){
							  that.searchLineList.push(item);
						 })
					 }
					if(that.searchLineList.length!=0){
						if(res.data.total<=that.searchLineList.length){
							that.loadStatus.splice(0,1,"没有更多了~")		
							return		
						 }
					}
			    }).catch(err => {
					uni.hideLoading()
				})
			},
			
			searchLine: Debounce(function(e){
				this.searchFrom.keyword =  e.detail.value.trim()
				this.searchFrom.page = 1
				this.searchLineList = []
				this.initSearch(this.searchFrom,true)
				
			}, 500),
			
			seerchEmpty(e){
				if(e==''){
					this.searchFrom.page = 1
					this.initSearch(this.searchFrom,false)
				}
			},
			reachBottom(){
				this.loadStatus.splice(0,1,"正在加载中")
				setTimeout(() => {
					this.initSearch(this.searchFrom,false)
				}, 200);
				this.searchFrom.page++
			},
			goLineInfo:function(line_id){
				// var date =  _formatDate("yyyy-MM-dd")
				// uni.navigateTo({
				// 	url:'/pages/bus/regular_list/index?line_id='+line_id+'&date='+date
				// })
				uni.navigateTo({
					url:'/pages/bus/line_info/index?line_id='+line_id
				})
			},
					
			goLineDetail(line_id){
					this.$u.route({
						url: 'pages/line_detail/index',
						params: {
							line_id: line_id
						}
					})
			},
			goRegulatList:function(line_id){
				var date =  _formatDate("yyyy-MM-dd")
				uni.navigateTo({
					url:'/pages/bus/regular_list/index?line_id='+line_id+'&date='+date
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.search-block{
		background-color: #ffffff;
		padding: 14upx 25upx;
		// position: fixed;
		width: 100%;
		top: 88upx;
	}
	.list-title{
		margin: 12px 12px 0px 12px;
		color: #007aff;
		font-weight: 700;
	}
	.list-main{
		position: relative;
		margin: 24rpx 24rpx;
		background-color: #fff;
	}
	
	.line-sn {
		font-size: 15px;
		font-weight: 600;
		color: #000000;
		margin: 8px 10px;
	}
	.od-item{
		color: #888;
		font-size: 12px;
	}
	
	.ticket-item {
		margin-left: auto;
		margin-right: 20px;
	}
	
	.item-block{
		position: relative;
		padding: 24rpx 20rpx 24rpx 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 3px 10px 0 rgba(0,0,0,.08);
	}
	.base-info{
		margin:15upx 0;
		padding: 0 6px
	}
	.price{
		font-size: 40rpx;
		font-weight: 500;
		color: #333;
	}
    .bot-item{
	  padding: 14rpx 0rpx 0 0;
	}
	.bule-cle{
		width: 116rpx;
		border-radius: 5px;
		border: 1px solid #26a2ff;
		display: flex;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: center;
		justify-content: center;
		padding: 10rpx;
		margin-left: 24rpx;
	}
	.time-text {
		color: #333;
		font-size: 24rpx;
		margin-bottom: 24rpx;
	}
	
	.search-empty{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.map-wrap{
		    height: 44px;
		    line-height: 44px;
	   left: 0;
	   top: 0;
	   width: 750rpx;
	   z-index: 9999;
	   text-align: center;
	   transition: 300ms;		
	}

	.back {
		position: absolute;
		left: 0;
		top: 0;
		min-width: 70rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// padding-top: 20px;
		height: 44px;
		line-height: 44px;
	}
	.nav-button{
		height: 61rpx;
		width: 178rpx;
		display: flex;
		margin-left: 16rpx;
		align-items: center;
		position: relative;
		border-radius: 32rpx;
		background: #ffffff;
		border-color: #dedede!important;

	}
	.nav-button::before {
	    content: " ";
	    position: absolute;
	    left: 50%;
	    top: 7px;
	    width: 1px;
	    height: 36px;
	    background-color: rgb(223,223,223);
	    transform: scale(.5);
	    transform-origin: 0 0;
	}
	.nav-button::after {
	    content: " ";
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 200%;
	    height: 200%;
	    border: 1px solid #eaeaea;
	    transform-origin: 0 0;
	    transform: scale(.5);
	    box-sizing: border-box;
	    border-radius: 32px;
	}
	.na-but{
		display: flex;
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	.fanhui, .home {
	    height: 100%;
	    flex: 1;
	    display: flex;
	}
	.back_icon {
	    width: 18rpx;
	    height: 33rpx;
	    margin: auto;
	}
	.home_icon {
	    width: 34rpx;
	    height: 32rpx;
	    margin: auto;
	}
	.slot-wrap{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
	}
	// .wrap {
	// 	display: flex;
	// 	flex-direction: column;
	// 	height: calc(100vh - var(--window-top));
	// 	width: 100%;
	// }
	.loadingtext{
		padding: 10px 0;
		text-align: center;
		color: #807e7e;
	}
	.search {
		padding-left: 30rpx;
		background-color: #fff !important;
	}
	
	.search {
		padding-top: 20rpx;
	}
	
	.search .input {
		margin-bottom: 10px;
		// width: 598rpx;
		background-color: #f7f7f7;
		border-radius: 33rpx;
		padding: 0 35rpx;
		box-sizing: border-box;
		height: 66rpx;
		width: 95%;
	}
	
	.search .input input {
		flex:1;
		font-size: 26rpx;
		font-size: 26rpx;
		margin-left: 20px;
		background-color: #f7f7f7;
	}
	
	.search .input .placeholder {
		color: #bbb;
	}
	
	.search .input .iconfont {
		color: #000;
		font-size: 35rpx;
	}
	
	.search .bnt {
		width: 120rpx;
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 30rpx;
		color: #282828;
	}
</style>